<script src="./script.js"></script>
<style src="./style.css"></style>
<template>
  <div class="app-container">

    <div class="filter-container">
      <el-button class="filter-item" type="primary" @click="handleAdd">新增分类</el-button>
      <el-button class="filter-item" @click="backToTop" v-if="flag == 'sub'">返回上级</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >

      <el-table-column label="编号" prop="id" align="center" width="120" />

      <el-table-column label="排序" prop="rank" align="center" width="120" />

      <el-table-column label="名称" prop="name" align="center" />

      <el-table-column label="图标" prop="id" align="center">
        <template slot-scope="{row}">
          <el-image
            v-if="row.cover"
            style="width: 80px; height: 80px;"
            :src="row.cover.url"
          />
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="230">
        <template slot-scope="{row,$index}">
          <el-button v-if="row.children" size="mini" @click="getSubCategories(row)">子类</el-button>
          <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
    >
      <el-form
        :model="formData"
        label-position="left"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="父类">
          <el-cascader
            v-model="formData.parent_id"
            :options="cateList"
            :props="{ expandTrigger: 'hover', checkStrictly: true }"
            style="width:100%"
          />
        </el-form-item>

        <el-form-item label="图标">
          <el-upload
            action="#"
            :http-request="handleUploadPic"
            class="avatar-uploader"
            list-type="picture-card"
            :limit="1"
            ref="upload"
            :file-list="fileList"
            :on-remove="onRemovePic"
            :auto-upload="true"
            >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>

        <el-form-item label="排序" prop="rank">
          <el-input v-model="formData.rank" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addData" v-if="!formData.id">新 增</el-button>
        <el-button type="primary" @click="updateData" v-if="formData.id">更 新</el-button>
      </div>
    </el-dialog>

  </div>
</template>
